<template>
	<div style="width: 100px">
		<el-dialog title="输入车牌号" width="632px" :visible.sync="dialogVisible" @open="init" @close="close">
			<!--S 输入键-->
			<!--文字-->
			<div class="row_key row_01">
				<div class="item" v-for="item in preVal" :class=" { 'active': val[0]==item.prefix,'disabled not_allowed':checked}" @click="getPre(item.prefix,'w')">{{item.prefix}}</div>
			</div>
			<!--字母-->
			<div class="row_key row_02">
				<div class="item" :class="{'disabled not_allowed':inputFocusIndex===0||checked}" v-for="item in preVal2" @click="getPre(item,'l')">{{item}}</div>
			</div>
			<!--数字-->
			<div class="row_key row_02">
				<div class="item" :class="{'disabled not_allowed':inputFocusIndex<2||checked}" v-for="item in preVal3" @click="getPre(item,'n')">{{item}}</div>
			</div>
			<!--E 输入键-->
			<!--S 车牌号-->
			<!-- {{val.length}} -->
			<div class="number">
				<input v-for="(v,i) in val" type="text" class="item" :class="{'highlight':i<2}" maxlength="1" v-model="val[i]" v-focus="inputFocusIndex===i" @focus="handleInputFocus(i)" @input="checkInput($event, i)"  @keydown="keydown($event, i)" :disabled="checked" />
				<el-checkbox v-model="isNewCar" style="margin-left: 20px;">新能源</el-checkbox>
				<el-checkbox v-model="checked" style="margin-left: -10px;" @change="clearNumber" v-if="showCheckNullNumber">无车牌</el-checkbox>
			</div>
			<!--E 车牌号-->
			<div slot="footer" class="dialog-footer">
				<div class="footer-input">
					<el-button size="small" type="primary" @click="confirm()" v-noMoreClick>确定</el-button>
					<el-button size="small" @click="close()">取消</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import {isTruckNum} from '@/utils/validate'
	import { getTurckNumber, queryPrelist, validate } from '@/api/truck/truckDriver.js'
	export default {
		//自定义指令
		directives: {
			focus: {
				update: function(el, {
					value
				}) {
					if(value) {
						el.focus();
					}
				},

				insert: function(el, {
					value
				}) {
					if(value) {
						el.focus();
					}
				}
			}
		},
		props:{
			showCheckNullNumber:{
				type:Boolean,
				default:false
			},
			showDefault:{
				type:Boolean,
				default:false
			},
		},
    data() {
      return {
      	isNewCar:false,//是否为新能源车
        dialogVisible: false,
        checked: false,
        preVal: [],
        keyCode: 0,
        isActive: false,
        preValItem: '',
        preValItem2: '',
        preVal3: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
        preVal2: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
        val: ["", "", "", "", "", "", ""],
        inputFocusIndex: "",
      };
    },
    computed:{
    	maxlength(){
    		return this.isNewCar?8:7
    	}
    },
    watch:{
    	val(nVal){
    		console.log(92,nVal)
    		if(nVal.length==8){
    			this.isNewCar=true;
    		}else{
    			this.isNewCar=false;
    		}
    	},
    	isNewCar(nVal){
    		let length=this.val.length
    		if(nVal){
    			if(length<8){
    				this.val.push('')
    			}
    			if(this.inputFocusIndex==6){
    				this.$nextTick(()=>{
    					this.inputFocusIndex=7
    				})
    			}
    		}else{
    			if(length==8){
    				this.val.pop()
    			}
    			if(this.inputFocusIndex==7){
    				this.inputFocusIndex-=1
    			}
    		}
    	}
    },
		mounted() {
			this.queryPrelist();
		},
    methods: {
      checkInput (e, i) {
        let index = this.inputFocusIndex
        let result, reg
        if (i === 1){
          reg = /^[A-Za-z]+$/
        } else if (1< i <=6) {
          reg =  /^[A-Za-z0-9]*$/
        }
        result = reg.test(e.target.value)
        if (!result) {
          this.val[i] = ''
        } else {
          if(this.keyCode !== 8) {
            this.inputFocusIndex = index + 1;
          }
        }
      },
      keydown (e, i) {
        this.keyCode = e.keyCode
        if (i === 0) {
          if (e.keyCode !== 8) {
            e.returnValue = false
          }
        }
      },
      initNumber() {
        this.val= ["", "", "", "", "", "", ""]
        if(this.isNewCar){
        	this.val.push('')
        }
      },
      // 打开弹框
      init () {
        // this.initNumber();
        this.inputFocusIndex = 0;
        this.checked = false;
        let truckNumber = this.$store.state.truck.truckNumber
        if (truckNumber) {
          truckNumber = truckNumber.split('')
          this.val = truckNumber
        }
        // if(this.showDefault){
        // 	let truckNumberArray = sessionStorage.getItem("truckNumberArry");
        // 	if(truckNumberArray) {
        // 		truckNumberArray = JSON.parse(truckNumberArray);
        // 		this.val = truckNumberArray;
        // 	}
        // }
      },
			confirm () {
        let list = this.val;
        let verify = false
        list.forEach((v, i) => {
            if (!v) {
                verify = true
                return
            }
        })
        if (verify) {
          this.$message.error('请您填写完整的车牌号码')
          return;
        } 
        let truckNum=this.val.join('')
        if(!isTruckNum(truckNum)){
          this.$message.error('请输入正确的车牌号')
          return;
        }
        for (let i = 0;i<this.val.length;i++){
          this.val[i] = this.val[i].toUpperCase()
        }
        this.$emit('refreshDataList', this.val)
          this.dialogVisible = false
			},
			close() {
				// sessionStorage.setItem("truckNumberArray",'')
        this.val = ["", "", "", "", "", "", ""]
        this.edit = false
				this.dialogVisible = false
			},
			//获得车牌前缀
			queryPrelist() {
				queryPrelist().then((res) => {
					this.preVal = res.data.result;
				})
			},
			//检查车牌号是否重复
			validate(number) {

			},
			//车牌前缀
			getPre(item,flag) {
				if(this.checked){//无牌
					return;
				}
				let index = this.inputFocusIndex;
        if (flag === 'w') {
          index = 0;
        }
        if(index===0){
        	if(flag=='w'){
	        	this.preVal.forEach(item2 => {
							if(item != item2.prefix) {
								item2.isActive = false;
							} else {
								item2.isActive = true;
							}
						})
        	}else{
        		//聚焦
        		this.inputFocusIndex=index;
        		return;
        	}
        }else if(index==1){
        	if(flag!='l'){
        		//聚焦
        		this.inputFocusIndex=index;
        		return;
        	}
        }else{
        	if(flag=='w'){
        		//聚焦
        		this.inputFocusIndex=index;
        		return;
        	}
        	
        }
				this.$set(this.val, index, item);
				index+=1;
				if(index>=this.maxlength){
					return;
				}
				this.inputFocusIndex=index;
			},
			//输入框聚焦
			handleInputFocus(i) {
				this.inputFocusIndex = i
			},
			//无牌
			clearNumber(val) {
				this.inputFocusIndex=0
				if(val) {
					getTurckNumber().then((res) => {
						let list = res.data.result;
						this.val = ['无', '牌'].concat(list)
					})
				} else {
					this.initNumber();
				}
			},
		    changeInput($event,index){
		        if (!$event.target.value) {
		            return
		        }
		        let that=this
		        let myInput='myInput'+index
		        this.$nextTick(()=>{
		            that.$refs[myInput].focus();
		        })
		    }
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/assets/scss/config.scss';
	.not_allowed {
		cursor: not-allowed !important;
	}

	.row_key {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}

	.row_01 {
		.item {
			width: 30px;
			height: 30px;
			background: #0c4e8e;
			border-radius: 2px;
			margin-right: 10px;
			margin-bottom: 10px;
			line-height: 30px;
			color: #ffffff;
			text-align: center;
			cursor: pointer;
            &:not(.not_allowed):hover {
                background: #f4b058;
                color: #fff;
            }
			&.active {
				background: #F59A23;
			}
		}
	}

	.row_02 {
		.item {
			cursor: pointer;
			margin-right: 10px;
			margin-bottom: 10px;
			width: 30px;
			height: 30px;
			background: #D9ECFE;
			border-radius: 2px;
			line-height: 30px;
			text-align: center;
			color: #2371BD;
            &:hover {
                background: #f4b058 ;
                color: #fff;
            }
			&:active {
				background: #f59a23;
				color: #fff;
			}
			&.not_allowed:active{
				background: #ececec;
				color: #999;
			}
			&.disabled {
				opacity: 0.7;
                background: #ececec;
                color: #999999;
			}
		}
	}

	::v-deep .el-dialog__wrapper .el-dialog .el-dialog__body {
		padding: 20px 10px 15px 20px;
	}

	.number {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 61px;
		background: #ececec;
		border-radius: 4px;
		margin-bottom: 20px;
    margin-right: 10px;
		.item {
			width: 38px;
			height: 38px;
			background-color: #fff;
			border: 1px solid #AAAAAA;
			border-radius: 4px;
			margin: 0 5px;
			line-height: 38px;
			text-align: center;
			background-color: #fff;
			&.highlight {
				background: $--color-primary-liyu;
				border-color: $--color-primary-liyu;
				color: #fff;
			}
			&:focus {
				border: 1px solid $--color-primary-liyu;
        outline: none;
			}
		}
	}
</style>
